<template>
	<view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="m-2">
				<view class="d-flex a-center today_title p-2 rounded-top">
					<view class="rounded-50 d-flex user_img j-center a-center">
						<u-icon name="coupon" color="#ff6b69" size="35"></u-icon>
					</view>
					<view class="font-md font-weight ml-1">订单状态：<text
							class="text-red font-weight">{{order_detail.status}}</text></view>
				</view>
				<view class="bg-white d-flex j-sb p-3 rounded-bottom a-center">
					<view class="">
						<view class="d-flex pb-1">
							<u-icon name="map" color="#" size="35"></u-icon>
							<view class="ml-2 font-md font-weight">
								{{order_detail.consignee}}&nbsp;&nbsp;&nbsp;{{order_detail.mobile}}
							</view>
						</view>
						<view class="text-muted font-29">
							收货地址：{{order_detail.province}}{{order_detail.city}}{{order_detail.district}}{{order_detail.address}}
						</view>
					</view>
					<view v-if="!(order_detail.label_order_status==='待收货'||order_detail.label_order_status==='已完成')"
						class="" @click="address(order_id)">
						<u-icon name="arrow-right" color="#888888" size="35"></u-icon>
					</view>
				</view>
			</view>

			<view class="p-3 m-2 rounded-20 font-md bg-white">
				<view class="d-flex j-sb a-center p-position">
					<view class="">
						<view class="d-flex">
							<view class="white-space">订单编号:</view>
							<view class="ml-6 font-weight">{{order_detail.order_sn}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="py-2">下单时间:</view>
							<view class="ml-6 font-weight border-bottom flex-1 py-3">{{order_detail.formated_add_time}}
							</view>
						</view>
					</view>
					<image v-if="order_detail.zhufahuo==1" class="d-block"
						style="width: 120rpx;height: 40rpx;transform: rotate(-20deg);position: absolute;right: 0;"
						src="../../static/zhufahuo.png" mode=""></image>
				</view>


				<view class="" v-if="order_detail.label_order_status==='已完成'||order_detail.label_order_status==='待收货'">
					<view class="d-flex">
						<view class="white-space">虚拟卡号:</view>
						<view class="ml-6 font-weight">{{order_detail.link_virtual_card.card_sn}}</view>
					</view>
					<view class="d-flex pb-3">
						<view class="py-2">虚拟卡密:</view>
						<view class="ml-6 font-weight border-bottom flex-1 py-3">
							{{order_detail.link_virtual_card.card_password}}
						</view>
					</view>
				</view>
				<view class="d-flex pb-3">
					<view class="">支付方式:</view>
					<view class="ml-6 font-weight">{{order_detail.pay_name}}</view>
				</view>
				<view class="d-flex pb-3">
					<view class="pb-2">订单来源:</view>
					<view class="ml-6 font-weight border-bottom flex-1 pb-3">
						{{order_detail.label_order_source?order_detail.label_order_source:'iPhone'}}
					</view>
				</view>
				<view class="d-flex py-3">
					<view class="">发票抬头:</view>
					<view class="ml-6 font-weight">{{order_detail.inv_payee?order_detail.inv_payee:'暂无'}}</view>
				</view>
				<view class="d-flex py-3">
					<view class="">发票内容:</view>
					<view class="ml-6 font-weight">{{order_detail.inv_content?order_detail.inv_content:'暂无'}}</view>
				</view>
				<view class="d-flex pb-3">
					<view class="pb-2">发票识别码:</view>
					<view class="ml-3 font-weight border-bottom flex-1 pb-3">
						{{order_detail.inv_tax_no?order_detail.inv_tax_no:'暂无'}}
					</view>
				</view>
				<view class="d-flex">
					<view class="pb-2">买家留言:</view>
					<view class="ml-6 font-weight flex-1 pb-3">{{order_detail.postscript?order_detail.postscript:'暂无'}}
					</view>
				</view>
			</view>

			<view class="m-2 pl-3 bg-white rounded-20">
				<view class="border-bottom py-3 d-flex j-sb a-center" @click="client">
					<view class="d-flex a-center">
						<view class="rounded-50 d-flex user_img j-center a-center">
							<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
						</view>
						<view class="font-weight ml-2">{{order_detail.mobile}}</view>
					</view>
					<view class="mr-3">
						<u-icon name="arrow-right" color="#777777" size="35"></u-icon>
					</view>
				</view>
				<view class="  j-sb" v-for="(item,index) in order_detail.goods_items_format" :key='index'>
					<view class="d-flex border-bottom py-2">
						<image class="detail_hot rounded-20" :src="item.img.url" mode=""></image>
						<view class="ml-2 flex-1 font-28">
							<view class="ellipsis consignee">{{item.name}}</view>
							<!-- 							<view class="d-flex j-sb mt-3">
								<view class="font-weight">{{item.formated_shop_price}}</view><view class="text-muted j-end mr-3">x{{item.goods_number}}</view>
							</view> -->
						</view>
					</view>
					<view class="border-bottom py-2 mr-3" v-for="(itemattr,indexattr) in item.attr" :key='indexattr'>
						<view class=" font-28" style="line-height: 40rpx;">{{itemattr.goods_attr}}:</view>
						<view class="font-weight  font-28" style="color: #ff6600;line-height: 40rpx;">
							{{itemattr.formated_shop_price}} X {{itemattr.goods_number}} = {{itemattr.subtotal}}
						</view>
					</view>
					<view class="d-flex j-sb border-bottom py-2 mr-3">
						<view class=" font-24" style="font-weight: bold;">积分:</view>
						<view class="font-weight  font-24" style="color: #ff6600;">{{item.price}} X {{item.jifen}}% =
							{{item.jifen_count}}
						</view>
					</view>
					<view class="d-flex j-sb border-bottom py-2 mr-3">
						<view class=" font-24" style="font-weight: bold;">成长值:</view>
						<view class="font-weight  font-24" style="color: #ff6600;">{{item.price}} X {{item.chengzhang}}%
							= {{item.chengzhang_count}}</view>
					</view>
				</view>
				<view class="border-bottom py-2 font-28 font-md">
					<view class="d-flex j-sb mr-3 pt-3">
						<view class="">商品总金额:</view>
						<view class="font-weight">
							{{order_detail.formated_goods_amount?order_detail.formated_goods_amount:'0.00'}}
						</view>
					</view>
					<view class="d-flex j-sb mr-3 pt-3">
						<view class="">发票:</view>
						<view class="font-weight">
							+{{order_detail.formated_pay_fee?order_detail.formated_pay_fee:'0.00'}}</view>
					</view>
					<view class="d-flex j-sb mr-3 pt-3">
						<view class="">储值卡:</view>
						<view class="font-weight">
							-{{order_detail.formatted_valuecard_amount?order_detail.formatted_valuecard_amount:'0.00'}}
						</view>
					</view>
					<view class="d-flex j-sb mr-3 pt-3">
						<view class="">储值卡折扣金额:</view>
						<view class="font-weight">
							-{{order_detail.formated_vc_dis_money?order_detail.formated_vc_dis_money:'0.00'}}</view>
					</view>
					<view class="d-flex j-sb mr-3 pt-3">
						<view class="">促销:</view>
						<view class="font-weight">
							-{{order_detail.formated_vc_dis_money?order_detail.formated_pay_fee:'0.00'}}</view>
					</view>
				</view>
				<view class="d-flex j-end mr-3 py-2">
					合计：&nbsp;<text class="font-weight">{{order_detail.formated_total_fee}}</text>
				</view>
			</view>
		</view>
		<!-- 底部 Device.model=='iPhone X'?'pb-2':'' -->
		<view class="" v-if="order_detail.label_order_status!='待发货'">
			<view class="footer" :class="Device.model=='iPhone X'?'footerX':''">
			</view>
			<view class="bg-white position-fixed bottom-0 w-100" :class="Device.model=='iPhone X'?'footerX':''">
				<view class="py-2 bg-white w-100 d-flex j-sb" v-if="order_detail.label_order_status=='待付款'">
					<view class="py-1 px-3 mr-2" @click="option">更多</view>
					<view class="d-flex j-end">
						<view class="py-1 px-3 border mr-2 rounded-30" @click="order_payment(order_id)"
							v-if="order_detail.pay_name=='支付宝'||order_detail.pay_name=='银行转账'">付款</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="order_mouse(order_id)">改价</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="comment(order_id)">备注</view>
					</view>
				</view>
				<view class="py-2 bg-white w-100 d-flex j-sb" v-else-if="order_detail.label_order_status=='待收货'">
					<view class="py-1 px-3 mr-2" @click="option">更多</view>
					<view class="d-flex j-end">
						<view class="py-1 px-3 border mr-2 rounded-30" @click="comment(order_id)">备注</view>
					</view>
				</view>
				<view class="py-2 bg-white w-100 d-flex j-sb" v-else-if="order_detail.label_order_status=='已完成'">
					<view class="py-1 px-3 mr-2" @click="option">更多</view>
					<view class="d-flex j-end">
						<view class="py-1 px-3 border mr-2 rounded-30" @click="comment(order_id)">备注</view>
					</view>
				</view>
				<view class="py-2 bg-white w-100 d-flex j-sb" v-else-if="order_detail.label_order_status=='已取消'">
					<view class="py-1 px-3 mr-2" @click="option">更多</view>
					<view class="d-flex j-end">
						<view class="py-1 px-3 border mr-2 rounded-30" @click="comment(order_id)">备注</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 更多操作 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="shareShow">
			<!-- 内容 -->
			<view class="m-2 bg-white rounded-20 icon_share py-2">
				<!-- 待发货 -->
				<view class="border-bottom d-flex py-4" v-if="order_detail.label_order_status==='待发货'">
					<view class="text-center span-5" @click="popupClose(order_id)">
						<image src="../../static/images/order/closed.png" mode=""></image>
						<view class="">关闭</view>
					</view>
				</view>
				<!-- 待付款 -->
				<view class="border-bottom d-flex py-4" v-else-if="order_detail.label_order_status==='待付款'">
					<view class="text-center flex-1" @click="popupEdit(order_id)">
						<image src="../../static/images/order/payment.png" mode=""></image>
						<view class="">付款</view>
					</view>
					<view class="text-center flex-1" @click="popupMouse(order_id)">
						<image src="../../static/images/order/change_price.png" mode=""></image>
						<view class="">改价</view>
					</view>
					<view class="text-center flex-1" @click="popupClose(order_id)">
						<image src="../../static/images/order/closed.png" mode=""></image>
						<view class="">关闭</view>
					</view>
				</view>

				<view class="d-flex py-4">
					<view class="text-center flex-1" @click="client(order_id)">
						<image src="../../static/images/order/customer.png" mode=""></image>
						<view class="">客户详情</view>
					</view>
					<view class="text-center flex-1" @click="contact">
						<image src="../../static/images/order/connection.png" mode=""></image>
						<view class="">联系买家</view>
					</view>
					<view class="text-center flex-1" @click="popupRecord(order_id)">
						<image src="../../static/images/order/operation.png" mode=""></image>
						<view class="">操作记录</view>
					</view>
					<view class="text-center flex-1" @click="refresh(order_id)">
						<image src="../../static/images/order/refresh.png" mode=""></image>
						<view class="">刷新</view>
					</view>
				</view>
			</view>
			<view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-1 rounded-25 text-primary"
				@click="cancelShare">
				取消
			</view>
		</s-popup>
		<u-modal v-model="close" title="提示" show-title="false" show-confirm-button show-cancel-button cancel-color
			confirm-color @confirm="close_comfirm">
			<view class="py-3">
				<view class="text-center">确定要取消派单吗?</view>
			</view>
		</u-modal>

		<u-modal v-model="contact_show" confirm-text="呼叫" :show-title="false" @confirm="contact_comfirm"
			show-confirm-button show-cancel-button cancel-color="#2b85e4" confirm-color="#2b85e4">
			<view class="py-5">
				<view class="text-center">{{order_detail.mobile}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
			sPopup
		},
		data() {
			return {
				shareShow: false,
				order_id: "", // 订单ID
				order_detail: "", // 订单详情列表
				close: false, // 取消指派订单
				contact_show: false, // 联系买家
				scrollHeight: 0, // 屏幕高度
				Device: JSON.parse(uni.getStorageSync("client")),
				u_loadmore: true, // 加载中
			}
		},
		onReady() {
			let _this = this
			uni.getSystemInfo({
				success(resu) {
					_this.$nextTick(function() {
						const query = uni.createSelectorQuery()
						query.select('.footer').boundingClientRect()
						console.log(resu)
						query.exec(function(res) {
							_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
						})
					})
				}
			})
		},
		methods: {
			// 客户详情
			client() {
				this.shareShow = false
				uni.navigateTo({
					url: "/pagesA/order/order-client?user_id=" + this.order_detail.user_id
				})
			},
			// 订单备注
			comment(order_id) {
				// this.comment_show=true
				uni.navigateTo({
					url: '/pagesA/order/order-record?order_id=' + order_id
				})
			},
			// 发货
			pyment(order_id) {
				this.shareShow = false
				uni.navigateTo({
					url: "/pagesA/order/order-today-shipments?order_id=" + order_id
				})
			},
			close_comfirm() {
				this.$H.post("admin/order/operate/cancelgrab", {
					order_id: this.order_id
				}).then(res => {
					this.$H.post("admin/orders/detail", {
						id: this.order_id
					}).then(res => {
						console.log(res)
						this.order_detail = res.data
					})
					console.log("取消", res)
				})
			},
			// 指派订单
			appoint(order_id) {
				if (this.order_detail.is_grab) {
					this.close = true
				} else {
					this.shareShow = false
					uni.navigateTo({
						url: "/pagesA/order/order-appoint?order_id=" + order_id
					})
				}
			},
			// 编辑地址
			editMap(order_id) {
				this.shareShow = false
				uni.navigateTo({
					url: "/pagesA/order/order-edit-map?order_id=" + order_id
				})
			},
			// 修改地址
			address(order_id) {
				this.shareShow = false
				uni.navigateTo({
					url: "/pagesA/order/order-modifyaddress?order_id=" + order_id
				})
			},
			// 关闭订单
			popupClose(order_id) {
				this.shareShow = false
				uni.navigateTo({
					url: "/pagesA/order/order-close?order_id=" + order_id
				})
			},

			// 付款
			order_payment(order_id) {
				this.shareShow = false
				uni.navigateTo({
					url: "/pagesA/order/order-confirm?order_id=" + order_id
				})
			},
			// 改价
			order_mouse(order_id) {
				this.shareShow = false
				uni.navigateTo({
					url: "/pagesA/order/order-mouse?order_id=" + order_id
				})
			},
			// 物流信息
			popupFlow(order_id) {
				this.shareShow = false
				uni.navigateTo({
					url: "/pagesA/order/order-flow?order_id=" + order_id
				})
			},
			// 操作记录
			popupRecord(order_id) {
				this.shareShow = false
				uni.navigateTo({
					url: "/pagesA/order/order-record?order_id=" + order_id
				})
			},
			// 联系买家
			contact() {
				this.contact_show = true
			},
			// 确认呼叫
			contact_comfirm() {
				this.shareShow = false
				uni.makePhoneCall({
					phoneNumber: this.order_detail.mobile //仅为示例
				});
			},
			// 打开弹框
			option() {
				this.shareShow = true
			},
			// 关闭弹框
			cancelShare() {
				this.shareShow = false
			},
			// 刷新
			refresh() {
				this.shareShow = false
				uni.showLoading({
					title: "刷新中",
					success: () => {
						this.$H.post("admin/orders/detail", {
							id: this.order_id
						}).then(res => {
							console.log(res)
							this.order_detail = res.data
						})
					}
				})
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			}
		},
		onShow() {
			if (this.order_id) {
				this.$H.post("v2/store/orders/detail", {
					id: this.order_id
				}).then(res => {
					console.log(res)
					this.order_detail = res.data
				})
			}
		},
		onLoad(e) {
			this.order_id = e.order_id
			this.$H.post("v2/store/orders/detail", {
				id: e.order_id
			}).then(res => {
				this.u_loadmore = false
				this.order_detail = res.data
			})
		}
	}
</script>

<style>
	.user_img {
		width: 40upx;
		height: 40upx;
		background-color: #ffd1d0;
	}

	.today_title {
		background: linear-gradient(to right, #ffeee9, #ffd3cc);
	}

	.detail_hot {
		width: 150upx;
		height: 150upx;
	}

	.footer {
		height: 100upx;
	}

	.footerX {
		height: 120upx;
	}

	.flow {
		background-image: linear-gradient(to right, #ef2b4d, #f66143);
	}

	.s-popup-mask {
		background: rgba(204, 204, 204, 0.3) !important;
	}

	.content {
		background-color: rgb(237, 237, 237) !important;
		color: #666666;
	}

	.s-popup-wrap {
		background: rgba(204, 204, 204, 0) !important;
	}

	.icon_share view {
		color: #888;
	}

	.icon_share image {
		width: 120upx;
		height: 120upx;
	}

	.bottom-2 {
		bottom: 2%;
	}

	.consignee {
		height: 84upx;
	}
</style>